import * as React from 'react';
import './FromGroup.scss';
import InputStep from '@/view/editor/components/commonCompents/EditorInputStep/EditorInputStep';
import { TransformType } from '@/interface/common';

// import { useSelector, useDispatch } from 'react-redux';
// import { setCounter } from '@/store/modules/about';

export type IInputStepListType = 'x' | 'y' | 'z';
export interface IInputStepList {
  num: number;
  step: number;
  name: string;
  /** 类型自定义使用，如xyz */
  type: IInputStepListType;
}
export interface IFromGroupProps {
  selectMesh: THREE.Object3D;
  transformType: TransformType;
  name: string;
  inputStepList: IInputStepList[];
  onchange: (type: string, num: number) => void;
}

export function FromGroup(props: IFromGroupProps) {
  const onChangeInputStep = (item: IInputStepList, newNum: number) => {
    props.onchange(item.type, newNum);
  };
  return (
    <div className="fromGroupPage">
      <div className="title">● {props.name}</div>
      {(props.inputStepList || []).map((item, index) => {
        return (
          <div
            className="item"
            key={item.name}
            style={{ marginBottom: index === props.inputStepList.length - 1 ? '0px' : '6px' }}
          >
            {item.name}
            <div>
              <InputStep
                num={props.selectMesh[props.transformType][item.type] }
                step={item.step}
                onChange={(num) => onChangeInputStep(item, num)}
              ></InputStep>
            </div>
          </div>
        );
      })}
    </div>
  );
}
